<template>
  <view class="edit-review-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">编辑评价</text>
      <view class="submit-btn" @tap="submitReview">
        <text>提交</text>
      </view>
    </view>
    
    <view class="edit-container">
      <!-- 评价对象信息 -->
      <view class="target-info">
        <view class="target-image">
          <text class="placeholder-icon iconfont">&#xe614;</text>
        </view>
        <view class="target-detail">
          <text class="target-name">{{ review.targetName }}</text>
          <text class="target-type">{{ getTargetTypeText(review.targetType) }}</text>
        </view>
      </view>
      
      <!-- 评分选择 -->
      <view class="rating-section">
        <text class="section-title">评分</text>
        <view class="rating-stars">
          <text 
            v-for="i in 5" 
            :key="i" 
            class="star" 
            :class="{ 'active': i <= review.rating }"
            @tap="setRating(i)"
          >★</text>
        </view>
        <text class="rating-text">{{ review.rating }}.0</text>
      </view>
      
      <!-- 评价内容 -->
      <view class="content-section">
        <text class="section-title">评价内容</text>
        <textarea 
          class="review-textarea" 
          v-model="review.content" 
          placeholder="请输入您的评价内容..."
          placeholder-style="color: #bcaaa4;"
          maxlength="500"
        ></textarea>
        <text class="content-count">{{ review.content.length }}/500</text>
      </view>
      
      <!-- 图片上传 -->
      <view class="images-section">
        <view class="section-header">
          <text class="section-title">上传图片</text>
          <text class="tip-text">最多上传9张图片</text>
        </view>
        <view class="image-uploader">
          <view class="image-list">
            <view 
              v-for="(image, index) in review.images" 
              :key="index" 
              class="image-item"
            >
              <text class="placeholder-icon iconfont">&#xe67f;</text>
              <view class="delete-icon" @tap="deleteImage(index)">
                <text>×</text>
              </view>
            </view>
            <view class="upload-btn" @tap="addImage" v-if="review.images.length < 9">
              <text class="plus-icon">+</text>
              <text class="upload-text">上传图片</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 评价ID
const reviewId = ref(0);

// 评价对象
const review = reactive({
  id: 0,
  targetId: 0,
  targetType: '',
  targetName: '',
  targetImage: '',
  rating: 5,
  content: '',
  images: [],
  time: ''
});

// 页面加载时执行
onMounted(() => {
  const pages = getCurrentPages();
  const page = pages[pages.length - 1];
  const options = page.$page?.options || {};
  
  // 获取评价ID
  reviewId.value = parseInt(options.id || 0);
  
  // 加载评价数据
  loadReviewData();
});

// 加载评价数据
const loadReviewData = () => {
  // 模拟API请求
  setTimeout(() => {
    // 模拟数据
    const reviewData = {
      id: reviewId.value,
      targetId: 101,
      targetType: 'nursing-home',
      targetName: '康福养老院',
      targetImage: '',
      rating: 5,
      content: '环境非常好，设施齐全，老人住得很舒适。工作人员态度也很好，专业细心。餐饮方面营养均衡，适合老年人需求。',
      images: ['img1', 'img2', 'img3'],
      time: '2023-10-15'
    };
    
    // 更新评价对象
    Object.assign(review, reviewData);
  }, 500);
};

// 设置评分
const setRating = (rating) => {
  review.rating = rating;
};

// 删除图片
const deleteImage = (index) => {
  review.images.splice(index, 1);
};

// 添加图片
const addImage = () => {
  // 模拟选择图片
  uni.showToast({
    title: '模拟添加图片',
    icon: 'none'
  });
  
  // 模拟添加新图片
  if (review.images.length < 9) {
    review.images.push(`img${review.images.length + 1}`);
  }
};

// 提交评价
const submitReview = () => {
  // 验证评价内容
  if (!review.content.trim()) {
    uni.showToast({
      title: '请填写评价内容',
      icon: 'none'
    });
    return;
  }
  
  // 模拟提交
  uni.showLoading({
    title: '提交中...'
  });
  
  // 模拟API请求
  setTimeout(() => {
    uni.hideLoading();
    
    uni.showToast({
      title: '评价更新成功',
      icon: 'success'
    });
    
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack({
        delta: 1
      });
    }, 1500);
  }, 1000);
};

// 获取评价对象类型文本
const getTargetTypeText = (type) => {
  const typeMap = {
    'nursing-home': '养老院',
    'charity': '公益活动',
    'service': '服务'
  };
  
  return typeMap[type] || '其他';
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.edit-review-page {
  min-height: 100vh;
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(195, 227, 227, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #2c7873;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
    
    .submit-btn {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      padding: 6px 15px;
      background: #6FB3B8;
      border-radius: 16px;
      
      text {
        color: #fff;
        font-size: 14px;
      }
    }
  }
  
  .edit-container {
    padding: 15px;
    
    // 评价对象信息
    .target-info {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(44, 120, 115, 0.05);
      
      .target-image {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background-color: rgba(111, 179, 184, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 12px;
        
        .placeholder-icon {
          font-size: 28px;
          color: #6FB3B8;
        }
      }
      
      .target-detail {
        .target-name {
          font-size: 16px;
          font-weight: 600;
          color: #5d4037;
          margin-bottom: 4px;
          display: block;
        }
        
        .target-type {
          font-size: 12px;
          color: #8d6e63;
          padding: 2px 6px;
          background-color: rgba(141, 110, 99, 0.1);
          border-radius: 10px;
        }
      }
    }
    
    // 评分部分
    .rating-section {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(44, 120, 115, 0.05);
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #5d4037;
        margin-bottom: 15px;
        display: block;
      }
      
      .rating-stars {
        display: flex;
        align-items: center;
        
        .star {
          font-size: 30px;
          color: #d1d1d1;
          margin-right: 10px;
          
          &.active {
            color: #f0a500;
          }
        }
      }
      
      .rating-text {
        font-size: 16px;
        color: #f0a500;
        margin-top: 10px;
        font-weight: 500;
      }
    }
    
    // 评价内容
    .content-section {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(44, 120, 115, 0.05);
      position: relative;
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #5d4037;
        margin-bottom: 15px;
        display: block;
      }
      
      .review-textarea {
        width: 100%;
        height: 150px;
        font-size: 15px;
        color: #5d4037;
        line-height: 1.6;
        padding: 10px;
        background-color: rgba(141, 110, 99, 0.05);
        border-radius: 8px;
        box-sizing: border-box;
      }
      
      .content-count {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
        color: #bcaaa4;
      }
    }
    
    // 图片上传
    .images-section {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(44, 120, 115, 0.05);
      
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        
        .section-title {
          font-size: 16px;
          font-weight: 600;
          color: #5d4037;
        }
        
        .tip-text {
          font-size: 12px;
          color: #bcaaa4;
        }
      }
      
      .image-uploader {
        .image-list {
          display: flex;
          flex-wrap: wrap;
          margin: 0 -5px;
          
          .image-item {
            width: calc(33.33% - 10px);
            height: 90px;
            margin: 5px;
            border-radius: 8px;
            background-color: rgba(141, 110, 99, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            
            .placeholder-icon {
              font-size: 30px;
              color: #bcaaa4;
            }
            
            .delete-icon {
              position: absolute;
              top: 5px;
              right: 5px;
              width: 22px;
              height: 22px;
              border-radius: 11px;
              background-color: rgba(0, 0, 0, 0.5);
              display: flex;
              justify-content: center;
              align-items: center;
              
              text {
                font-size: 18px;
                color: #fff;
                line-height: 1;
              }
            }
          }
          
          .upload-btn {
            width: calc(33.33% - 10px);
            height: 90px;
            margin: 5px;
            border-radius: 8px;
            background-color: rgba(141, 110, 99, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            .plus-icon {
              font-size: 30px;
              color: #bcaaa4;
              line-height: 1;
              margin-bottom: 5px;
            }
            
            .upload-text {
              font-size: 12px;
              color: #8d6e63;
            }
          }
        }
      }
    }
  }
}
</style> 